import { delItem, getList } from '@/services/api/area';
import { AreaTypesResultItem } from '@/services/api/model/areaTypesModel';
import { ActionType, PageContainer, ProList } from '@ant-design/pro-components';
import { Button, Card, Image, Popconfirm, Space, Tag, Typography } from 'antd';
import React, { useRef } from 'react';
import CreateForm from './components/CreateForm';
const Area: React.FC = () => {
  const { Paragraph } = Typography;
  const onCancel = () => {};
  const actionRef = useRef<ActionType>();
  // 删除
  const handleConfirm = async (id: string) => {
    // 这里 return 一个 primise 之后会执行异步关闭 resolve(null) 之后关闭
    try {
      await delItem(id);
      actionRef.current!.reloadAndRest!();
      Promise.resolve(null);
    } catch (error) {
      Promise.resolve(null);
    }
  };
  //提交
  const onSubmit = () => {
    // 重置到默认值，包括表单
    // 断言标识,reloadAndRest一定是存在的
    actionRef.current!.reloadAndRest!();
  };
  return (
    <PageContainer>
      <Card bodyStyle={{ padding: '10px' }}>
        <ProList<AreaTypesResultItem>
          actionRef={actionRef}
          toolbar={{
            // 新建
            actions: [
              <CreateForm key={102938} onCancel={onCancel} onSubmit={onSubmit}></CreateForm>,
            ],
          }}
          request={async (
            // 第一个参数 params 查询表单和 params 参数的结合
            // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
            params,
          ) => {
            // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
            // 如果需要转化参数可以在这里进行修改
            const msg = await getList({
              // 这里传入数组之后,默认会有序列化的
              page: params.current,
              pageSize: params.pageSize,
            });
            return {
              data: msg.results,
              // success 请返回 true，
              // 不然 table 会停止解析数据，即使有数据
              success: true,
              // 不传会使用 data 的长度，如果是分页一定要传
              total: msg.numResults,
            };
          }}
          pagination={{
            defaultPageSize: 21,
            showSizeChanger: false,
          }}
          showActions="always"
          rowSelection={{}}
          grid={{ gutter: 16, column: 3 }}
          onItem={(record: any) => {
            return {
              onMouseEnter: () => {
                // console.log(record);
              },
              onClick: () => {
                console.log(record);
              },
            };
          }}
          // 不需要搜索
          // search={{
          //   span: 6,
          //   // filterType: 'light',
          //   // searchGutter: 2,
          //   // 搜索表单的样式
          //   style: {
          //     padding: 0,
          //   },
          // }}
          metas={{
            avatar: {
              render: (_, row, index) => {
                return (
                  <div
                    key={index}
                    style={{
                      width: 48,
                      height: 48,
                      lineHeight: '22px',
                      backgroundSize: '100%',
                      textAlign: 'center',
                      padding: '8px 16px 16px 12px',
                      color: '#FFF',
                      fontWeight: 'bold',
                      display: 'inline-block',
                      backgroundImage:
                        "url('https://gw.alipayobjects.com/zos/bmw-prod/daaf8d50-8e6d-4251-905d-676a24ddfa12.svg')",
                    }}
                  >
                    {index + 1}
                  </div>
                  // <Avatar
                  //   src={'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg'}
                  // />
                );
              },
              search: false,
            },

            actions: {
              // 操作栏 处于的位置 ,extra 顶部 actions 底部
              cardActionProps: 'extra',
              // 注意:所有的数组格式的 都要添加一个key
              render: (_, row) => [
                <Space key={11123123}>
                  <CreateForm
                    trigger={
                      <Button size="small" type="text">
                        编辑
                      </Button>
                    }
                    itemToken={row.token}
                    key={1029338}
                    onCancel={onCancel}
                    onSubmit={onSubmit}
                    title="编辑"
                  ></CreateForm>

                  <Popconfirm title="确定删除吗" onConfirm={() => handleConfirm(row.token!)}>
                    <Button key={'del1'} danger style={{ width: '100%' }} size="small" type="text">
                      删除
                    </Button>
                  </Popconfirm>
                </Space>,
              ],
              search: false,
            },
            subTitle: { search: false },
            type: { search: false },
            content: {
              search: false,
              render: (_, row) => {
                return (
                  <div style={{ width: '100%' }}>
                    <div style={{ display: 'flex' }}>
                      <Image
                        width={90}
                        height={90}
                        src={IMG_URL + row.imageUrl}
                        fallback=""
                      />
                      <div
                        style={{
                          marginLeft: '10px',
                        }}
                      >
                        <div style={{ display: 'flex' }}>
                          Token:
                          <Paragraph copyable={{ tooltips: false }}>{row?.token}</Paragraph>
                        </div>
                        <div style={{ display: 'flex' }}>
                          描述:
                          {row?.description ? (
                            <Paragraph copyable={{ tooltips: false }}>{row?.description}</Paragraph>
                          ) : (
                            '--'
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                );
              },
            },
            title: {
              search: false,
              title: '名称',
              dataIndex: 'name',
              render: (_, row) => {
                return <Tag color="processing">{row.name}</Tag>;
              },
            },
          }}
        />
      </Card>
    </PageContainer>
  );
};

export default Area;
